<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Vendor styles -->
    <link rel="stylesheet" href="static/css/material-design-iconic-font.min.css">
    <link rel="stylesheet" href="static/css/animate.min.css">
    <link rel="stylesheet" href="static/css/jquery.scrollbar.css">

    <!-- App styles -->
    <link rel="stylesheet" href="static/css/app.min.css">

    <!-- Javascript -->
    <script src="static/js/jquery.min.js"></script>
    <script src="static/js/popper.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <script src="static/js/jquery.scrollbar.min.js"></script>
    <script src="static/js/jquery-scrollLock.min.js"></script>

    <!-- Data tables -->
    <script src="static/js/dataTables/jquery.dataTables.min.js"></script>
    <script src="static/js/dataTables/dataTables.buttons.min.js"></script>
    <script src="static/js/dataTables/buttons.print.min.js"></script>
    <script src="static/js/dataTables/jszip.min.js"></script>
    <script src="static/js/dataTables/buttons.html5.min.js"></script>

    <!-- App functions and actions -->
    <script src="static/js/app.js"></script>
</head>

<body data-ma-theme="blue-grey">
<main class="main">
    <!--页面加载动画-->
    <div class="page-loader">
        <div class="page-loader__spinner">
            <!--<svg viewBox="25 25 50 50">-->
            <!--<circle cx="50" cy="50" r="20" fill="none" stroke-width="2" stroke-miterlimit="10"/>-->
            <!--</svg>-->
            <i class="zmdi zmdi-spinner zmdi-hc-4x zmdi-hc-spin"></i>
        </div>
    </div>

    <!--页面头-->
    <header class="header">
        <div class="navigation-trigger hidden-xl-up" data-ma-action="aside-open" data-ma-target=".sidebar">
            <div class="navigation-trigger__inner">
                <i class="navigation-trigger__line"></i>
                <i class="navigation-trigger__line"></i>
                <i class="navigation-trigger__line"></i>
            </div>
        </div>

        <div class="header__logo hidden-sm-down">
            <h1><a href="javascript:void(0)">苏州电信智慧物联网管理平台</a></h1>
        </div>

        <!--<form class="search">-->
        <!--<div class="search__inner">-->
        <!--<input type="text" class="search__text" placeholder="搜索">-->
        <!--<i class="zmdi zmdi-search search__helper" data-ma-action="search-close"></i>-->
        <!--</div>-->
        <!--</form>-->

        <ul class="top-nav">
            <!--<li class="hidden-xl-up"><a href="" data-ma-action="search-open"><i class="zmdi zmdi-search"></i></a></li>-->
            <li class="hidden-xs-down">
                <a href="javascript:void(0);" title="安全退出">
                    <i class="zmdi zmdi-power"></i>
                </a>
            </li>
            <li class="hidden-xs-down">
                <a title="全屏">
                    <i class="zmdi zmdi-fullscreen" data-ma-action="fullscreen"></i>
                </a>
            </li>
            <li class="dropdown hidden-xs-down">
                <a href="javascript:void(0);" data-toggle="dropdown" title="选择主题"><i
                        class="zmdi zmdi-more-vert"></i></a>

                <div class="dropdown-menu dropdown-menu-right">
                    <div class="dropdown-item theme-switch">
                        选择主题
                        <div class="btn-group btn-group-toggle btn-group--colors" data-toggle="buttons">
                            <label class="btn bg-green"><input type="radio" value="green" autocomplete="off"></label>
                            <label class="btn bg-blue"><input type="radio" value="blue" autocomplete="off"></label>
                            <label class="btn bg-red"><input type="radio" value="red" autocomplete="off"></label>
                            <label class="btn bg-orange"><input type="radio" value="orange" autocomplete="off"></label>
                            <label class="btn bg-teal"><input type="radio" value="teal" autocomplete="off"></label>
                            <div class="clearfix mt-2"></div>
                            <label class="btn bg-cyan"><input type="radio" value="cyan" autocomplete="off"></label>
                            <label class="btn bg-blue-grey active"><input checked type="radio" value="blue-grey"
                                                                          autocomplete="off"></label>
                            <label class="btn bg-purple"><input type="radio" value="purple" autocomplete="off"></label>
                            <label class="btn bg-indigo"><input type="radio" value="indigo" autocomplete="off"></label>
                            <label class="btn bg-brown"><input type="radio" value="brown" autocomplete="off"></label>
                        </div>
                    </div>
                </div>
            </li>
        </ul>
    </header>

    <aside class="sidebar">
        <div class="scrollbar-inner">
            <ul class="navigation">
                <li><a href="#"><i class="zmdi zmdi-home"></i> 首页</a>
                </li>

                <li><a href="http://byrushan.com/projects/material-admin/app/2.1/jquery/bs4/icons.html"><i
                        class="zmdi zmdi-airplane"></i> 图标</a></li>

                <li class="navigation__sub">
                    <a href="javascript:void(0);"><i class="zmdi zmdi-view-week"></i> 水浸监测</a>
                    <ul>
                        <li><a href="#leach/t_index">
                            设备管理</a></li>
                        <li><a href="#leach/t_group">分组管理</a></li>
                    </ul>
                </li>

                <li class="navigation__sub">
                    <a href="javascript:void(0);"><i class="zmdi zmdi-trending-up"></i> 能耗监测</a>
                    <ul>
                        <li><a href="#power/t_index">
                            设备管理</a></li>
                        <li><a href="#power/t_group">
                            分组管理</a></li>
                    </ul>
                </li>

            </ul>
        </div>
    </aside>

    <section class="content">
        <div class="content__inner">

            <!--内容头信息-->
            <!--<header class="content__title">-->
            <!--<h1>内容标题</h1>-->
            <!--<small>副标题</small>-->
            <!--<div class="actions">-->
            <!---->
            <!--</div>-->
            <!--</header>-->

            <!--内容-->
            <div class="card" id="content">

            </div>

            <footer class="footer hidden-xs-down">
                <p>© Material Admin Responsive. All rights reserved.</p>
                <ul class="nav footer__nav">
                    <a class="nav-link" href="javascript:void(0);">Homepage</a>

                    <a class="nav-link" href="javascript:void(0);">Company</a>

                    <a class="nav-link" href="javascript:void(0);">Support</a>

                    <a class="nav-link" href="javascript:void(0);">News</a>

                    <a class="nav-link" href="javascript:void(0);">Contacts</a>
                </ul>
            </footer>
        </div>
    </section>
</main>

<!-- Older IE warning message -->
<!--[if IE]>
<div class="ie-warning">
    <h1>Warning!!</h1>
    <p>You are using an outdated version of Internet Explorer, please upgrade to any of the following web browsers to
        access this website.</p>
    <p>Sorry for the inconvenience!</p>
</div>
<![endif]-->
<script>
    function getHash() {
        //拿到#后面的字符，即是URL的锚部分
        var hash = document.location.hash;
        var $con = $("#content");
        if (!hash) {
            $con.html('');
            return;
        }
        var hashUrl = hash.replace('#', '');
        if (!hashUrl) return;
        var url = 'templates/' + hashUrl + '.html';
        $.ajax({
            url: url,
            type: "get",
            dataType: "html",
            success: function (ret) {
                $con.html(ret);
                $("ul.navigation li").removeClass("navigation__active");
                var $activeLink = $('a[href="' + hash + '"]').parent();
                $activeLink.addClass("navigation__active");
                $activeLink.parents("li.navigation__sub").addClass("navigation__sub--active");
            }
        });
    }

    getHash();
    window.addEventListener('hashchange', getHash);
</script>
</body>
</html>